<template>
  <div
    id="privilegeAdd"
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="form">
        <el-form :model="privilegeData">
          <el-form-item
            label="权限名称"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '权限名称不能为空'}]"
          >
            <el-input
              style="width:70%"
              :disabled="isShow"
              v-model="privilegeData.name"
              placeholder="请输入权限名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="权限类型"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '权限类型不能为空'}]"
          >
            <el-select
              v-model="privilegeData.type"
              :disabled="isShow || isInterface"
              placeholder="请选择权限类型"
              style="width:70%; "
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="权限所属维度"
            :label-width="formLabelWidth"
            :rules="[
          { required: true, message: '权限所属维度不能为空'}]"
          >
            <el-select
              v-model="menuDimensionList"
              :disabled="isShow"
              multiple
              placeholder="请选择权限维度"
              style="width:70%; "
            >
              <el-option
                v-for="item in menuDimenList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="privilegeData.type == 1"
            label="链接类型"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '链接类型不能为空'}]"
          >
            <el-radio-group v-model="privilegeData.linkType">
              <el-radio :label="1">内部链接</el-radio>
              <el-radio :label="2">外部链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="privilegeData.type == 1"
            label="链接打开类型"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '链接打开类型不能为空'}]"
          >
            <el-radio-group v-model="privilegeData.linkOpenType">
              <el-radio :label="1">内部嵌入</el-radio>
              <el-radio :label="2">弹窗显示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="菜单URL"
            v-if="privilegeData.type != 2"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '菜单URL不能为空'}]"
          >
            <el-input
              style="width:70%"
              :disabled="isShow"
              v-model="privilegeData.url"
              placeholder="请输入菜单URL"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单授权" v-if="privilegeData.type != 2" :label-width="formLabelWidth">
            <el-input
              style="width:70%"
              v-model="privilegeData.perms"
              :disabled="isShow"
              placeholder="请输入(多个用逗号分隔，如：user:list,user:create)"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="应用类型"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '应用类型不能为空'}]"
          >
            <el-select
              v-model="privilegeData.sysType"
              :disabled="isShow"
              placeholder="请选择应用类型"
              style="width:70%; "
            >
              <el-option
                v-for="item in systypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="privilegeData.type != 2" label="前端页面id" :label-width="formLabelWidth">
            <el-input
              style="width:70%"
              :disabled="isShow"
              v-model="privilegeData.viewId"
              placeholder="请输入前端页面id"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否显示导航栏"
            :label-width="formLabelWidth"
             v-if="privilegeData.type != 2"
          >
            <el-switch :disabled="isShow" v-model="privilegeData.showNav"></el-switch>
          </el-form-item>
          <el-form-item label="菜单图标名称" v-if="privilegeData.type != 2" :label-width="formLabelWidth">
            <el-input
              style="width:70%"
              :disabled="isShow"
              v-model="privilegeData.icon"
              placeholder="请输入菜单图标名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单排序" :label-width="formLabelWidth">
            <el-input
              style="width:70%"
              :disabled="isShow"
              v-model="privilegeData.orderNum"
              placeholder="请输入菜单排序"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口选择" :label-width="formLabelWidth" v-if="privilegeData.type == 2">
            <el-select
              v-model="value"
              multiple
              filterable
              collapse-tags
              style="width:90%"
              clearable
              remote
              reserve-keyword
              @change="interfaceChange"
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in interfaceList"
                :key="item.apiId"
                :label="item.apiName"
                :value="item.apiId"
              >
                <span style="float: left">{{ item.apiName }}</span>
                <span
                  style="float: right; color: #8492a6; font-size: 13px;margin-right:0.16rem;"
                >{{ item.url }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接口详情" :label-width="formLabelWidth" v-if="privilegeData.type == 2">
            <div class="interface_list">
              <div class="interface_item" v-for="item in selectInterfaceList" :key="item.apiId">
                <el-row :gutter="2">
                  <el-col :span="8" style="min-width:2rem;min-height:0.3rem;">{{item.apiName}}</el-col>
                  <el-col :span="14" style="min-width:4rem;min-height:0.3rem;">{{item.url}}</el-col>
                  <el-col :span="2">
                    <span class="reduce_btn" @click="selectInterfaceDetele(item)"></span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn_div" v-if="!isShow">
        <div class="btn_sure" @click="sure()">确 认</div>
        <div class="btn_cancel" @click="cancel()">取 消</div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, $fileInput;
export default {
  data: function() {
    return {
      formLabelWidth: "160px",
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      isShow: false,
      title: "",
      value: [],
      loading: false,
      privilegeData: {},
      menuDimensionList: [],
      interfaceList: [],
      isInterface: false,
      selectInterfaceList: [],
      menuDimenList: [],
      typeList: [],
      systypeList: [
        {
          id: 1,
          name: "管理后台"
        },
        {
          id: 2,
          name: "app"
        }
      ]
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      console.log(data);
      vm.isInterface = false;
      if (data.menuId == null) {
        vm.isAdd = true;
        vm.title = "新增权限";

        vm.privilegeData = {
          parentId: data.parentId,
          name: "",
          url: "/",
          perms: null,
          sysType: 1,
          type: "",
          viewId: null,
          icon: null,
          orderNum: null,
          linkType: 1,
          linkOpenType: 1,
          menuDimensionList: [],
          showNav: null
        };
        vm.menuDimensionList = [];
        if (data.type == 1) {
          vm.privilegeData.type = 2;
          vm.isInterface = true;
          let objectList = [];
          if (data.menuDimensionList != null) {
            data.menuDimensionList.forEach(item => {
              objectList.push(item.menuDimension);
            });
            vm.menuDimensionList = objectList;
          }
        }
      } else {
        vm.isAdd = false;
        vm.title = "编辑权限";
        vm.isInterface = true;
        api.sysRoleInfo({ menuId: data.menuId }).then(function(data) {
          if (data.resultCode == 2000) {
            vm.privilegeData = data.info;
            let objectList = [];
            vm.selectInterfaceList = data.info.menuApiList;
            if (vm.privilegeData.menuDimensionList != null) {
              vm.privilegeData.menuDimensionList.forEach(item => {
                objectList.push(item.menuDimension);
              });
              vm.menuDimensionList = objectList;
            } else {
              vm.privilegeData.menuDimensionList = [];
              vm.menuDimensionList = [];
            }
          } else {
            vm.$message.error(data.message);
          }
        });
      }
      if (data.isShow) {
        vm.isShow = true;
        vm.title = "查看权限";
      }
    },
    selectInterfaceDetele(item) {
      var index = vm.selectInterfaceList.indexOf(item);
      var index1 = vm.value.indexOf(item.apiId);
      if (index !== -1) {
        vm.selectInterfaceList.splice(index, 1);
      }
      if (index1 !== -1) {
        vm.value.splice(index, 1);
      }
    },
    interfaceChange(val) {
      let currentInterfaceId = val[val.length - 1];
      for (let i = 0; i < vm.interfaceList.length; i++) {
        if (currentInterfaceId == vm.interfaceList[i].apiId) {
          vm.selectInterfaceList.push(vm.interfaceList[i]);
          return;
        }
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        vm.loading = true;
        vm.interfaceList = [];
        api.getListOnLevel({ generalTerm: query }).then(function(data) {
          if (data.resultCode == 2000) {
            vm.value = [];
            vm.interfaceList = data.list;
            vm.loading = false;
          } else {
            vm.$message.error(data.message);
            vm.loading = false;
          }
        });
      } else {
        this.interfaceList = [];
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      vm.selectInterfaceList = [];
      vm.interfaceList = [];
      vm.value = [];
      setTimeout(function() {
        vm.isShow = false;
        vm.show = false;
        vm.visible = false;
      }, 500);
    },
    sure: function() {
      if (vm.privilegeData.name == "") {
        this.$message.warning("权限名称不能为空");
        return;
      }
      if (vm.privilegeData.type == "") {
        if (vm.privilegeData.type == 0) {
        } else {
          this.$message.warning("权限类型不能为空");
          return;
        }
      }
      console.log(vm.menuDimensionList);
      if (vm.menuDimensionList.length == 0) {
        this.$message.warning("权限所属维度不能为空");
        return;
      }
      if (vm.privilegeData.url == "") {
        this.$message.warning("菜单URL不能为空");
        return;
      }
      if (vm.privilegeData.sysType == "") {
        this.$message.warning("应用类型不能为空");
        return;
      }
      let objectList = [];
      vm.privilegeData.menuApiList = vm.selectInterfaceList;
      if (vm.isAdd) {
        vm.menuDimensionList.forEach(item => {
          objectList.push({
            menuDimension: item
          });
        });
        vm.privilegeData.menuDimensionList = objectList;

        api.sysRoleAdd(vm.privilegeData).then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "添加成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      } else {
        console.log(vm.privilegeData.menuDimensionList.length);
        for (let i = 0; i < vm.menuDimensionList.length; i++) {
          if (vm.privilegeData.menuDimensionList.length != 0) {
            for (
              let y = 0;
              y < vm.privilegeData.menuDimensionList.length;
              y++
            ) {
              if (
                vm.privilegeData.menuDimensionList[y].menuDimension ==
                vm.menuDimensionList[i]
              ) {
                objectList.push(vm.privilegeData.menuDimensionList[y]);
                break;
              }
              if (y == vm.privilegeData.menuDimensionList.length - 1) {
                objectList.push({
                  menuDimension: vm.menuDimensionList[i]
                });
              }
            }
          } else {
            objectList.push({
              menuDimension: vm.menuDimensionList[i]
            });
          }
        }
        vm.privilegeData.menuDimensionList = objectList;
        api.sysRoleUpdate(vm.privilegeData).then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "编辑成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.$message.error(data.message);
          }
        });
      }
    }
  },
  created: function() {
    vm = this;
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    this.menuDimenList = dicdata["menu_dimen_mode"];
    this.typeList = dicdata["menu_type_mode"];
    console.log(this.typeList);
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/clue_manage/clue_add.css"></style>
<style scoped>
/* // 滚动条 */
::-webkit-scrollbar {
  width: 0.05rem;
  height: 0.1rem;
}
::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: #bbbbbb;
}
::-webkit-scrollbar-track {
  background: #f2f6fc;
  border-radius: 0.1rem;
}
</style>
<style lang="scss">
#privilegeAdd {
  .btn_div {
    padding: 0 0 0.3rem 0;
  }
  .el-form-item__label {
    font-size: 0.16rem;
  }
  .panel {
    width: 10rem;
  }
  .form {
    padding: 0 0.3rem 0.3rem 0;
    font-size: 0.16rem;
    color: #666666;
  }
  .interface_list {
    width: 8rem;
    height: 2.5rem;
    padding: 0.1rem 0;
    border: 1px solid #dcdfe6;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0.1rem;
    .interface_item {
      margin-left: 0.1rem;
      line-height: 0.3rem;
      max-height: 0.6rem;
    }
    .interface_item:hover {
      background-color: #eeeeee;
    }
  }
}
</style>
